<template>
  <div id="container"></div>
</template>
<script>
import resize from "@/mixins/resize";
export default {
  mixins: [resize],
  data() {
    return {
      myChart: {}
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      var echarts = require("echarts");
      this.myChart = echarts.init(document.getElementById("container"), "dark");
      this.myChart.setOption({
        backgroundColor: "#11253e",
        toolbox: {
          left: "right",
          right: 20,
          top: 20,
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          //提示框
          trigger: "item",
          triggerOn: "mousemove",
          backgroundColor: "rgba(1,70,86,1)",
          borderColor: "rgba(0,246,255,1)",
          borderWidth: 0.5,
          textStyle: {
            fontSize: 10
          },
          formatter: function(params) {
            console.log(params);
            const str = `
            ${params.marker}${params.name}<br/>
            年龄:12<br/>
            性别:男`;
            return str;
          }
        },
        color: this.legendColor,
        selectedMode: "false",
        bottom: 20,
        left: 0,
        right: 0,
        top: 0,
        animationDuration: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            hoverAnimation: true,
            layout: "force",
            force: {
              repulsion: 300,
              edgeLength: 200
            },
            nodeScaleRatio: 0.6,
            draggable: true,
            roam: true,
            symbol: "circle",

            data: [
              {
                name: "李四",
                symbolSize: 40,
                itemStyle: {
                  normal: {
                    borderColor: "#04f2a7",
                    borderWidth: 2,
                    shadowBlur: 20,
                    shadowColor: "#04f2a7",
                    color: "#001c43"
                  }
                }
              },
              {
                name: "张三",
                symbolSize: 40,
                itemStyle: {
                  normal: {
                    borderColor: "#82dffe",
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: "#04f2a7",
                    color: "#001c43"
                  }
                }
              },
              {
                name: "王五",
                symbolSize: 40,
                itemStyle: {
                  normal: {
                    borderColor: "#b457ff",
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: "#b457ff",
                    color: "#001c43"
                  }
                }
              }
            ],
            links: [
              {
                source: "李四",
                target: "张三",
                label: {
                  show: true,
                  formatter: "教师"
                }
              },
              {
                source: "李四",
                target: "王五",
                label: {
                  show: true,
                  formatter: "教师"
                }
              },
              {
                source: "张三",
                target: "王五",
                label: {
                  show: true,
                  formatter: "同学"
                }
              },
              {
                source: "王五",
                target: "张三",
                label: {
                  show: true,
                  formatter: "同学"
                }
              }
            ],
            // categories: this.categories,
            focusNodeAdjacency: true,
            scaleLimit: {
              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
              min: 0.5, //最小的缩放值
              max: 9 //最大的缩放值
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 8],
            label: {
              normal: {
                show: true,
                // position: "right",
                // color: "#000",
                distance: 5,
                fontSize: 10
              }
            },
            lineStyle: {
              normal: {
                width: 1.5,
                curveness: 0,
                type: "solid",
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#6E35FF" // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "#fff" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFA12F" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
#container {
  height: calc(100vh - 84px);
  width: 100vw;
}
</style>
